<template>
<div class="vider">
  <div class="all">
    <video src="http://file.zoomyoung.cn/web/video/1.mp4"  id="video" class="video" :muted="muted" autoplay>ddd</video>
    <img  src="http://file.zoomyoung.cn/web/img/logo-decoration.png" class="logo"/>
    <img src="http://file.zoomyoung.cn/web/img/skip-button.png" class="skip" @click="next"/>
    <div class="stop" @click="open">
           <img :src="muted_src.realy==true ? muted_src.open : muted_src.cloth" />
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'video1',
  data () {
    return {
      muted_src:{
        realy:true,
        open:'http://file.zoomyoung.cn/web/img/Open-music.png',
        cloth:'http://file.zoomyoung.cn/web/img/Close-music.png'
      },
      muted:false,
    }
  },
  beforeCreate(){
    var _this=this;
    var u = navigator.userAgent;        //识别这个机器的内核
    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)//判断是否为安卓   安卓不兼容自动播放
    {
         _this.$router.push({name:"homePage"});
    }
  },
  mounted(){
    var _this=this;
    var myVideo=document.getElementById('video');
    myVideo.addEventListener("ended",function(){
         _this.$router.push({name:"homePage"}); 
    })
   document.addEventListener("WeixinJSBridgeReady", function () {
          myVideo.play();
      }, false)
     var path=_this.GetQueryString('path');
     var code=_this.GetQueryString('code');
     if(path!=null)
     {
      this.$router.push({name:path}); 
     }
     if(path!=null&&code!=null)
     {
      this.$router.push({name:path,query:{code:code}});
     }
  },
  methods:{
    open(){
      if(this.muted===false)
      {
        this.muted=true;
        this.muted_src.realy=false;
      }
      else
      {
        this.muted_src.realy=true;
        this.muted=false;
      }
    },
    next(){
       this.$router.push({name:"homePage"}); 
    },
    GetQueryString(name)
      {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
      }
  }
}
</script>


<style scoped>
  body,html{width: 100%;height: 100%;}
  .all{width: 100%;height: 100%;background:black;}
  .video{width: 100%;position: fixed;bottom: 0;left: 0}
  .logo{width: 42.3%;display: block;position: absolute;left: 2.7%;top: 20px;}
  @keyframes dong{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
  }
  .skip{width: 26.7%;display: block;position: absolute;right: 2.7%;bottom: 20px;}
  .stop{width: 11.7%;position: absolute;right: 2.7%;top: 20px;}
  .stop img{width: 100%;animation: dong 3s linear infinite;transform-origin:center;}
</style>
